<!doctype html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Fresns" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="generator" content="Bootstrap 5">
    <title>列表模块介绍</title>
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../assets/css/bootstrap-icons.css">
    <link rel="stylesheet" href="../../assets/css/fresns.css">
</head>

<body>
    <!--页头-->
    <header>
        <div class="text-center mt-5"><img src="../../assets/images/fresns-icon.png" height="80"></div>
    </header>

    <div class="container-fluid mb-5">
        <div class="text-center my-5">
            <div class="text-center mt-3">
                <div class="btn-group">
                    <a href="post.html" class="btn btn-outline-primary active">样式</a>
                    <a href="../code/post.html" class="btn btn-outline-primary">结构</a>
                    <a href="../desc/post.html" class="btn btn-outline-primary">说明</a>
                </div>
            </div>
        </div>
        <ul class="nav nav-tabs justify-content-center">
            <li class="nav-item"><a class="nav-link" href="../index.html">首页</a></li>
            <li class="nav-item"><a class="nav-link" href="member.html">成员列表</a></li>
            <li class="nav-item"><a class="nav-link" href="group.html">小组列表</a></li>
            <li class="nav-item"><a class="nav-link" href="hashtag.html">话题列表</a></li>
            <li class="nav-item"><a class="nav-link active" href="post.html">帖子列表</a></li>
            <li class="nav-item"><a class="nav-link" href="comment.html">评论列表</a></li>
            <li class="nav-item"><a class="nav-link" href="extend.html">扩展内容模板</a></li>
            <li class="nav-item"><a class="nav-link" href="implant.html">植入内容模板</a></li>
        </ul>
    </div>

    <div class="container-md clearfix">
        <div class="row">
            <!--左侧导览 开始-->
            <div class="col-2 d-none d-lg-block">
                <nav class="nav nav-pills flex-column">
                    <a class="flex-sm-fill text-sm-center nav-link" href="post.html">纯文内容</a>
                    <a class="flex-sm-fill text-sm-center nav-link" href="post-image.html">图片帖子</a>
                    <a class="flex-sm-fill text-sm-center nav-link" href="post-video.html">视频帖子</a>
                    <a class="flex-sm-fill text-sm-center nav-link" href="post-audio.html">音频帖子</a>
                    <a class="flex-sm-fill text-sm-center nav-link" href="post-doc.html">文档帖子</a>
                    <a class="flex-sm-fill text-sm-center nav-link active" href="post-allow.html">有权限条件帖子</a>
                    <a class="flex-sm-fill text-sm-center nav-link" href="post-extend.html">扩展内容帖子</a>
                </nav>
            </div>
            <!--左侧导览 结束-->
            <div class="col-12 col-lg-8">
                <div class="lists-box">
                    <!--帖子列表-->
                    <h5>帖子列表</h5>
                    <div class="card clearfix">
                        <!--帖子 开始-->
                        <div class="position-relative pb-2">
                            <!--帖子作者信息-->
                            <div class="post-member">
                                <div class="d-flex">
                                    <div class="flex-shrink-0">
                                        <a href="#">
                                            <img src="../../assets/images/temp/avatar-decorate.png" alt="头像挂件" class="member-decorate">
                                            <img src="../../assets/images/temp/jarvis.jpg" alt="头像" class="member-avatar rounded-circle">
                                        </a>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="member-primary d-lg-flex">
                                            <div class="member-info d-flex text-nowrap overflow-hidden">
                                                <a href="#" class="member-link d-flex">
                                                    <div class="member-nickname text-nowrap overflow-hidden">Jarvis</div>
                                                    <div class="member-verified"><img src="../../assets/images/temp/verified-icon.png" alt="认证图标" data-bs-toggle="tooltip" data-bs-placement="top" title="认证描述，接口参数 verifiedDesc 内容"></div>
                                                    <div class="member-name text-secondary">@jarvis</div>
                                                </a>
                                                <div class="member-role d-flex">
                                                    <div class="member-role-icon"><img src="../../assets/images/temp/role.png" alt="主角色图标"></div>
                                                    <div class="member-role-name"><span class="badge rounded-pill">主角色名</span></div>
                                                </div>
                                            </div>
                                            <div class="member-icon d-flex flex-wrap flex-lg-nowrap overflow-hidden my-2 my-lg-0">
                                                <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                                                <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                                                <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                                                <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                                                <img src="../../assets/images/temp/member-icon.png" alt="成员图标">
                                            </div>
                                        </div>
                                        <div class="member-secondary d-flex flex-wrap mb-3">
                                            <div class="text-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="2021-03-01 12:30:21">12分钟前</div>
                                            <a href="#" class="link-secondary ms-2"><i class="bi bi-geo-alt-fill"></i>上海虹桥国际机场</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--帖子内容-->
                            <div class="post-content mx-3 position-relative">
                                <p>Fresns 是一款<a href="hashtag.html" class="content-link">#免费开源#</a>的社交网络服务软件，是<a href="member.html" class="content-link">@唐杰</a> 专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
                                <p>Fresns 是一款<a href="hashtag.html" class="content-link">#免费开源</a> 的社交网络服务软件，专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
                                <p><a href="#" class="text-decoration-none stretched-link">全文</a></p>
                            </div>
                            <!--帖子权限信息-->
                            <div class="post-allow">
                                <div class="allow_mask_static"></div>
                                <div class="text-center">
                                    <p class="text-secondary mb-2">可试读前 10% 内容</p>
                                    <p><button type="button" class="btn btn-outline-info btn-lg w-50" data-bs-toggle="modal" data-bs-target="#post-allow">¥8.00 阅读全部</button></p>
                                </div>
                            </div>
                            <!--帖子热评信息-->
                            <div class="post-comment mx-3 mt-3 position-relative">
                                <div class="clearfix">
                                    <span class="badge bg-warning text-dark fs-7">热评</span>
                                    <span class="float-end text-secondary">88 赞</span>
                                </div>
                                <div class="mt-2">
                                    <a href="member.html" class="content-link">用户昵称</a>:
                                    <a href="comment.html" class="text-decoration-none link-dark stretched-link">专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态。</a>
                                </div>
                            </div>
                            <!--帖子交互功能-->
                            <div class="post-interaction mt-3 px-3">
                                <div class="d-flex">
                                    <div class="interaction-box">
                                        <button class="btn btn-inter" type="button"><img src="../../assets/images/icon_like.png">12</button>
                                    </div>
                                    <div class="interaction-box">
                                        <a class="btn btn-inter" href="comment.html" role="button"><img src="../../assets/images/icon_comment.png">12</a>
                                    </div>
                                    <div class="interaction-box dropup">
                                        <button class="btn btn-inter" type="button" data-bs-toggle="dropdown" aria-expanded="false"><img src="../../assets/images/icon_share.png"></button>
                                        <ul class="dropdown-menu" aria-labelledby="share">
                                            <li><span class="dropdown-item-text fw-bolder">分享到：</span></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-link-45deg"></i> 复制链接</a></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-chat-dots-fill"></i> 微信好友</a></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-bullseye"></i> 微信朋友圈</a></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-image"></i> 生成分享图</a></li>
                                        </ul>
                                    </div>
                                    <div class="ms-auto dropup text-end">
                                        <button class="btn btn-inter" type="button" data-bs-toggle="dropdown" aria-expanded="false"><img src="../../assets/images/icon_more.png"></button>
                                        <ul class="dropdown-menu interaction-more" aria-labelledby="more">
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-pencil-square"></i> 编辑</a></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-trash"></i> 删除</a></li>
                                            <hr class="dropdown-divider">
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-bookmark-check"></i> 收藏</a></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-bookmark-x"></i> 不喜欢</a></li>
                                            <hr class="dropdown-divider">
                                            <li><a class="dropdown-item py-2" href="#"><img src="../../assets/images/temp/role.png">举报</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr class="dropdown-divider">
                        <!--帖子 2 开始-->
                        <div class="position-relative pb-2">
                            <!--帖子作者信息-->
                            <div class="post-member">
                                <div class="d-flex">
                                    <div class="flex-shrink-0">
                                        <a href="#">
                                            <img src="../../assets/images/temp/jarvis.jpg" alt="头像" class="member-avatar rounded-circle">
                                        </a>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="member-primary d-lg-flex">
                                            <div class="member-info d-flex text-nowrap overflow-hidden">
                                                <a href="#" class="member-link d-flex">
                                                    <div class="member-nickname text-nowrap overflow-hidden">Jarvis</div>
                                                    <div class="member-verified"><img src="../../assets/images/temp/verified-icon.png" alt="认证图标" data-bs-toggle="tooltip" data-bs-placement="top" title="认证描述，接口参数 verifiedDesc 内容"></div>
                                                    <div class="member-name text-secondary">@jarvis</div>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="member-secondary d-flex flex-wrap mb-3">
                                            <div class="text-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="2021-03-01 12:30:21">12分钟前</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--帖子内容-->
                            <div class="post-content mx-3 position-relative">
                                <p>Fresns 是一款<a href="hashtag.html" class="content-link">#免费开源#</a>的社交网络服务软件，是<a href="member.html" class="content-link">@唐杰</a> 专为跨平台而打造的通用型社区产品，支持灵活多样的内容形态，可以满足多种运营场景，符合时代潮流，更开放且更易于二次开发。</p>
                                <p><a href="#" class="text-decoration-none stretched-link"></a></p>
                            </div>
                            <!--帖子权限信息-->
                            <div class="post-allow">
                                <div class="allow_mask_static"></div>
                                <div class="text-center">
                                    <p class="text-secondary mb-2">可试读前 10% 内容</p>
                                    <p><button type="button" class="btn btn-outline-info btn-lg w-50" data-bs-toggle="modal" data-bs-target="#post-allow">输出密码阅读全部内容</button></p>
                                </div>
                            </div>
                            <!--帖子扩展信息-->
                            <div class="post-append mx-3 mt-3 d-flex">
                                <!--帖子小组-->
                                <div class="post-group me-auto">
                                    <a href="#" class="badge rounded-pill text-decoration-none"><img src="../../assets/images/temp/video.gif" alt="小组封面图" class="rounded">小组名称</a>
                                </div>
                            </div>
                            <!--帖子交互功能-->
                            <div class="post-interaction mt-3 px-3">
                                <div class="d-flex">
                                    <div class="interaction-box">
                                        <button class="btn btn-inter" type="button"><img src="../../assets/images/icon_like.png">12</button>
                                    </div>
                                    <div class="interaction-box">
                                        <a class="btn btn-inter" href="comment.html" role="button"><img src="../../assets/images/icon_comment.png">12</a>
                                    </div>
                                    <div class="interaction-box dropup">
                                        <button class="btn btn-inter" type="button" data-bs-toggle="dropdown" aria-expanded="false"><img src="../../assets/images/icon_share.png"></button>
                                        <ul class="dropdown-menu" aria-labelledby="share">
                                            <li><span class="dropdown-item-text fw-bolder">分享到：</span></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-link-45deg"></i> 复制链接</a></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-chat-dots-fill"></i> 微信好友</a></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-bullseye"></i> 微信朋友圈</a></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-image"></i> 生成分享图</a></li>
                                        </ul>
                                    </div>
                                    <div class="ms-auto dropup text-end">
                                        <button class="btn btn-inter" type="button" data-bs-toggle="dropdown" aria-expanded="false"><img src="../../assets/images/icon_more.png"></button>
                                        <ul class="dropdown-menu interaction-more" aria-labelledby="more">
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-pencil-square"></i> 编辑</a></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-trash"></i> 删除</a></li>
                                            <hr class="dropdown-divider">
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-bookmark-check"></i> 收藏</a></li>
                                            <li><a class="dropdown-item py-2" href="#"><i class="bi bi-bookmark-x"></i> 不喜欢</a></li>
                                            <hr class="dropdown-divider">
                                            <li><a class="dropdown-item py-2" href="#"><img src="../../assets/images/temp/role.png">举报</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--帖子 结束-->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 特定成员 Modal -->
    <div class="modal fade" id="post-allow" tabindex="-1" aria-labelledby="postAllowLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="postAllowLabel">标题</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body fresns-iframe">
                    <iframe src="https://tangjie.me/sample-file" title="插件页面" width="100%" height="100%"></iframe>
                </div>
            </div>
        </div>
    </div>

    <footer class="text-center" style="margin-top:100px;">
        <div><img src="../../assets/images/fresns-logo.png" height="30"></div>
        <p class="mt-3 mb-5"><a href="https://tangjie.me" target="_blank">唐杰出品</a></p>
    </footer>

    <script src="../../assets/javascript/bootstrap.bundle.min.js"></script>
    <script src="../../assets/javascript/fresns.js"></script>
</body>

</html>